<template>
  <div class="admin-panel">
    <div class="header">
      <!-- <img src="path/to/your/image.jpg" alt="Administrator's Control Panel" class="panel-image" /> -->
      <!-- <h1 class="welcome-text">WELCOME TO ADMINISTRATOR'S CONTROL PANEL</h1> -->
      <h1 class="welcome-text">欢迎使用全国计量文化与科普云平台系统</h1>
    </div>
    <div class="notification" @click="onLink">
      <div class="notification-icon">🔔</div>
      <div class="notification-text">
        您好，您目前有
        <span class="highlight">{{ number }}</span> 个待审核任务，请处理!!!!
      </div>
    </div>
  </div>
</template>

<script setup>
import { getPengding } from '@/api/content/contentList.js'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const store = useStore()
const userId = store.state.app.user.id
const router = useRouter()
const number = ref()
const onLink = () => {
  console.log('点击跳转')
  // content/ContentManagementList
  router.push({
    path: '/content/ContentManagementList',
    query: { status: 'prepared' }
  })
}
const getList = () => {
  getPengding({ user_id: userId }).then((res) => {
    number.value = res.data
  })
}
getList()
</script>
<style lang="scss" scoped>
.admin-panel {
  text-align: center;
  padding: 50px;
  background-color: #f5f5f5f5;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 50px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.panel-image {
  width: 50%;
  max-width: 600px;
}
.welcome-text {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.notification {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.notification-icon {
  font-size: 24px;
  margin-right: 10px;
  color: #f0ad4e;
}

.notification-text {
  font-size: 16px;
  color: #555;
}

.highlight {
  color: #d9534f;
  font-weight: bold;
}
</style>
